<template>
  <div>
    <el-dialog
      title="隐患详情"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      fullscreen
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <div class="common-container">
        <el-card class="box-card" shadow="never">
          <div class="head">隐患记录</div>
          <div class="header">
            <div class="header_left">
              <el-date-picker
                v-model.trim="timeArr"
                type="datetimerange"
                size="small"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
                :picker-options="pickerOptions"
                style="width: 360px; margin-left: 10px"
                @change="onChangeTime"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="content">
            <el-table
              :data="dataList"
              height="400px"
              class="table"
              ref="refTable"
              row-key="id"
              :header-cell-style="headerStyle"
            >
              <el-table-column
                align="center"
                label="序号"
                type="index"
                width="80"
                :index="indexMethod"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="orgName"
                label="联网单位"
                min-width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="name"
                label="安装点"
                min-width="180"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="imei"
                label="设备编码"
                min-width="130"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="deviceType"
                label="产品类型"
                min-width="130"
              >
                <template slot-scope="scope">
                  {{ scope.row.deviceType | deviceTypeText }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="deviceModel"
                label="产品型号"
                min-width="130"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="type"
                label="隐患类型"
                min-width="120"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <!-- {{ scope.row.type | hiddenDangerTypeText }} -->
                   <dict-tag :options="dict.type.device_hidden_type" :value="scope.row.type" />
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="source"
                label="隐患源"
                min-width="120"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.source | hiddenDangerSourceText }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="createTime"
                label="上报时间"
                min-width="180"
                show-overflow-tooltip
              >
              </el-table-column>
            </el-table>
            <pagination
              :page.sync="page"
              :limit.sync="limit"
              :total="total"
              @pagination="warnRecordList"
              class="pagination"
            >
            </pagination>
          </div>
        </el-card>
        <el-card class="box-card" style="margin: 15px 0">
          <div class="div_box">
            <div class="head">设备属性</div>
            <div class="div_tab">
              <div
                @click="devtypeClick('battery_value')"
                class="tab_box"
                :style="
                  typeName == '电池电量' ? 'border: 1px solid #5848FF;' : ''
                "
              >
                <span>电池电量</span>
                <span>{{ deviceList.batteryValue || 0 }}%</span>
              </div>
              <div
                @click="devtypeClick('battery_voltage')"
                class="tab_box"
                v-if="info.deviceType != 'FireHydrant'"
                :style="
                  typeName == '电池电压' ? 'border: 1px solid #5848FF;' : ''
                "
              >
                <span>电池电压</span>
                <span>{{ deviceList.batteryVoltage || 0 }}V</span>
              </div>
              <!-- 烟感 -->
              <div
                @click="devtypeClick('temperature')"
                class="tab_box"
                v-if="info.deviceType == 'SmokeAlarm'"
                :style="typeName == '温度' ? 'border: 1px solid #5848FF;' : ''"
              >
                <span>温度</span>
                <span>{{ deviceList.temperature || 0 }}°</span>
              </div>
              <div
                @click="devtypeClick('smoke_value')"
                class="tab_box"
                v-if="info.deviceType == 'SmokeAlarm'"
                :style="
                  typeName == '烟雾浓度' ? 'border: 1px solid #5848FF;' : ''
                "
              >
                <span>烟雾浓度</span>
                <span>{{ deviceList.smokeValue || 0 }}</span>
              </div>
              <!-- 燃气 -->
              <div
                @click="devtypeClick('gas_sample_value')"
                class="tab_box"
                v-if="info.deviceType == 'GasSensor'"
                :style="
                  typeName == '气体浓度' ? 'border: 1px solid #5848FF;' : ''
                "
              >
                <span>气体浓度</span>
                <span>{{ deviceList.gasSampleValue || 0 }}</span>
              </div>
              <!-- 消防水压 -->
              <div
                @click="devtypeClick('sensor_dat')"
                class="tab_box"
                v-if="info.deviceType == 'FireHydrant'"
                :style="
                  typeName == '传感器数据' ? 'border: 1px solid #5848FF;' : ''
                "
              >
                <span>传感器数据</span>
                <span>{{ deviceList.sensor_dat || 0 }}</span>
              </div>
              <div
                @click="devtypeClick('csq')"
                class="tab_box"
                v-if="info.deviceType == 'FireHydrant'"
                :style="typeName == 'CSQ' ? 'border: 1px solid #5848FF;' : ''"
              >
                <span>CSQ</span>
                <span>{{ deviceList.csq || 0 }}</span>
              </div>
            </div>
          </div>
        </el-card>
        <el-card class="box-card" style="margin-bottom: 15px">
          <div class="div_box">
            <div class="head">{{ typeName }}曲线</div>
            <div id="device" style="width: 100%; height: 300px"></div>
            <div class="timer">
              <div
                @click="timerClick(1)"
                :style="
                  timernum == 1
                    ? 'background-color: #867AFF;border: none;color: #FFF;'
                    : ''
                "
              >
                今日
              </div>
              <div
                @click="timerClick(0)"
                :style="
                  timernum == 0
                    ? 'background-color: #867AFF;border: none;color: #FFF;'
                    : ''
                "
              >
                昨日
              </div>
              <div>
                <el-date-picker
                  class="el_date_picker"
                  v-model="value1"
                  type="daterange"
                  size="small"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                  :default-time="['00:00:00', '23:59:59']"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </div>
            </div>
          </div>
        </el-card>
        <p style="height: 10px"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  reqHiddenDangerLog,
  reqDeviceDataget,
  reqDevicestatistic,
} from "@/api/api";
import * as echarts from "echarts";
import { mapState } from "vuex";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import moment from "moment";
// import advanceSearchMixin from "../../mixins/advanceSearch";

export default {
   dicts: ['device_hidden_type'],
  name: "",
  components: {
    Pagination,
  },
  props: ["info"],
  mixins: [tableStyleMixin],
  data() {
    return {
      //实现时间限制选择在一个月内而且不能超过当前时间
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.cuttentTime = minDate.getTime();
          if (maxDate) {
            this.cuttentTime = "";
          }
        },
        disabledDate: (time) => {
          //获取当前时间戳
          let myDate = new Date();
          let newY = myDate.getFullYear();
          let newM = myDate.getMonth() + 1;
          let newD = myDate.getDate();
          let oldTime =
            newY +
            "-" +
            (newM < 10 ? "0" + newM : newM) +
            "-" +
            (newD < 10 ? "0" + newD : newD) +
            " " +
            "23:59:59";
          // let oldTime="2022-7-5 23:59:59"
          oldTime = new Date(oldTime).getTime(); // 将中国时间转换成毫秒
          // 今天之后的时间不可选
          if (time.getTime() > oldTime) {
            //time.getTime() > Date.now()
            return true;
          }
          //选择日期范围为一个月
          if (this.cuttentTime != "") {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.cuttentTime - one;
            const maxTime = this.cuttentTime + one;
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        },
      },
      dataList: [],
      timeArr: [],
      startTime: "",
      endTime: "",
      dialogVisible: false,
      loading: false,
      page: 1,
      limit: 10,
      total: 0,
      loadingSearch: false,
      loadingReset: false,

      deviceList: {},
      value1: [],
      typeName: "电池电量",
      timernum: "1", //1今日 0昨天
      devtype: "battery_value", //设备属性
      option: {
        color: "#867AFF",
        // color: ['#867AFF'],
        // 分别控制 canvas 距离容器四周的距离
        grid: {
          // left: '3%', //默认10%
          // right: '4%', //默认10%
          // bottom: '8%', //默认60
          top: "15%",
          left: "2%", //默认10%
          right: "4%", //默认10%
          bottom: "5%", //默认60
          containLabel: true,
          //grid区域是否包含坐标轴的刻度标签
        },
        // 提示框设置
        tooltip: {
          trigger: "axis", //触发类型——坐标轴
          // 鼠标移入条目下面的背景
          axisPointer: {
            type: "line",
            z: 0,
            lineStyle: {
              color: "rgba(225,225,225,.3)",
            },
          },
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          boundaryGap: false, //紧挨边缘
          //设置坐标轴字体颜色和宽度
          axisLine: {
            //这是x轴文字颜色
            lineStyle: {
              color: "#A9AFC8",
            },
          },
          // 单独隐藏刻度线
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          //设置坐标轴字体颜色和宽度
          axisLine: {
            //这是x轴文字颜色
            lineStyle: {
              color: "#A9AFC8",
            },
          },
          // 单独隐藏刻度线
          axisTick: {
            show: false,
          },
          //网格线
          splitLine: {
            show: true, //隐藏或显示
            lineStyle: {
              color: "#A9AFC8",
              type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
            },
          },
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            // smooth: true,//平滑折线图
            // 线条样式
            lineStyle: {
              color: "#867AFF",
              type: "solid", //可选值还有 dotted  solid
            },
          },
        ],
        dataZoom: [
          {
            type: "inside",
            startValue: 0, // 重点在这   -- 开始的值
            endValue: 6, // 重点在这   -- 结束的值
          },
        ],
      },
      deviceInfo: {},
      startTimeEchart: moment(moment().startOf("day").valueOf()).format(
        "YYYY-MM-DD HH:mm:ss"
      ), //当前时间
      endTimeEchart: moment(moment().valueOf()).format("YYYY-MM-DD HH:mm:ss"), //当前时间
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  watch: {
    info: {
      async handler(val) {
        if (val) {
          this.timernum = 1;
          this.startTime = val.startTime;
          this.endTime = val.endTime;
          this.timeArr = [val.startTime, val.endTime];
          // await this.getPreMonth();
          await this.warnRecordList();
          this.DeviceDataget();
          this.Devicestatistic();
        }
      },
      deep: true,
    },
    value1(e) {
      // console.log(e, "e");
      if (e) {
        this.timernum = 2;
        this.startTimeEchart = e[0];
        this.endTimeEchart = e[1];
        this.Devicestatistic();
      } else {
        this.timernum = 1;
        (this.startTimeEchart = moment(
          moment().startOf("day").valueOf()
        ).format("YYYY-MM-DD HH:mm:ss")), //当前时间
          (this.endTimeEchart = moment(moment().valueOf()).format(
            "YYYY-MM-DD HH:mm:ss"
          )), //当前时间
          this.Devicestatistic();
      }
    },
  },
  methods: {
    // 序号
    indexMethod(index) {
      return index + 1 + (this.page - 1) * this.limit;
    },
    // 列表
    async warnRecordList() {
      const res = await reqHiddenDangerLog(this.page, this.limit, {
        startTime: this.startTime,
        endTime: this.endTime,
        type: this.info.type,
        source: this.info.source,
        imei: this.info.imei,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.dataList = res.data.rows;
      this.total = res.data.total;
    },
    onChangeTime(e) {
      this.startTime = e ? e[0] : "";
      this.endTime = e ? e[1] : "";
      this.warnRecordList();
    },
    // 获取近一个月的时间
    getPreMonth() {
      // 获取今天的日期
      var today = new Date();

      // 计算一个月后的日期
      var oneMonthLater = new Date(today);
      oneMonthLater.setMonth(oneMonthLater.getMonth() - 1);

      // 格式化日期为年-月-日格式
      function formatDate(date) {
        var year = date.getFullYear();
        var month = (date.getMonth() + 1).toString().padStart(2, "0"); // getMonth() 返回的月份是从0开始的，所以需要+1
        var day = date.getDate().toString().padStart(2, "0");
        return `${year}-${month}-${day}`;
      }

      // 使用函数格式化日期
      var formattedDate = formatDate(oneMonthLater);
      // 使用函数格式化当前日期
      var formattedCurrentDate = formatDate(today);
      this.startTime = `${formattedDate} 00:00:00`;
      this.endTime = `${formattedCurrentDate} 23:59:59`;
      this.timeArr = [this.startTime, this.endTime];
    },
    // 关闭初始化数据
    closeDialog() {
      this.deviceList = {};
      this.value1 = "";
      this.typeName = "电池电量";
      this.startTimeEchart = moment(moment().startOf("day").valueOf()).format(
        "YYYY-MM-DD HH:mm:ss"
      ); //当前时间
      this.endTimeEchart = moment(moment().valueOf()).format(
        "YYYY-MM-DD HH:mm:ss"
      ); //当前时间
      this.timernum = "1"; //1今日 0昨天
      this.devtype = "battery_value"; //设备属性
    },
    // 点击今日||昨天
    timerClick(e) {
      this.value1 = "";
      if (e == 0) {
        this.timernum = 0;
        // 昨天
        this.startTimeEchart = moment(
          moment().add(-1, "days").startOf("day").valueOf()
        ).format("YYYY-MM-DD HH:mm:ss");
        this.endTimeEchart = moment(
          moment().add(-1, "days").endOf("day").valueOf()
        ).format("YYYY-MM-DD HH:mm:ss");
        this.Devicestatistic();
      } else {
        this.timernum = 1;
        (this.startTimeEchart = moment(
          moment().startOf("day").valueOf()
        ).format("YYYY-MM-DD HH:mm:ss")), //当前时间
          (this.endTimeEchart = moment(moment().valueOf()).format(
            "YYYY-MM-DD HH:mm:ss"
          )), //当前时间
          this.Devicestatistic();
      }
    },
    //imei查询最新设备数据
    async DeviceDataget() {
      const res = await reqDeviceDataget(this.info.imei);
      // console.log(res);
      // console.log(this.deviceInfo);
      this.deviceList = res.data.rows || {};
      this.deviceInfo = res.data.rows;
    },
    // 点击设备属性
    devtypeClick(e) {
      this.devtype = e;
      if (e == "battery_value") {
        this.typeName = "电池电量";
      } else if (e == "battery_voltage") {
        this.typeName = "电池电压";
      } else if (e == "temperature") {
        this.typeName = "温度";
      } else if (e == "smoke_value") {
        this.typeName = "烟雾浓度";
      } else if (e == "gas_sample_value") {
        this.typeName = "气体浓度";
      } else if (e == "sensor_dat") {
        this.typeName = "传感器数据";
      } else if (e == "csq") {
        this.typeName = "CSQ";
      }
      this.Devicestatistic();
    },
    // 设备数据统计
    async Devicestatistic() {
      const res = await reqDevicestatistic({
        imei: this.info.imei,
        type: this.devtype,
        startTime: this.startTimeEchart,
        endTime: this.endTimeEchart,
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.option.xAxis.data = res.data.row.reportTime;
      this.option.series[0].data = res.data.row.data;
      this.getCahrt();
    },
    // 初始化图表
    getCahrt() {
      var chartDom = document.getElementById("device");
      var deviceType = echarts.init(chartDom); // 基于准备好的dom，初始化echarts实例
      let listener = function () {
        deviceType.resize();
      };
      window.addEventListener("resize", listener);
      this.option && deviceType.setOption(this.option); // 使用指定的配置项和数据显示图表。
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../common.less");
@import url("~@views/style/tablePage.less");
// 下拉框加载开始
.header {
  background-color: @primaryHeaderBgcolor;
  border-radius: 6px 6px 0 0;
  position: relative;
  justify-content: left;
}
.common-container {
  box-shadow: none;
}
.footer {
  display: flex;
  margin-left: 10px;
}
.popover_footer {
  width: 100%;
  display: flex;
  justify-content: center;
}
::v-deep .el-dialog {
  max-height: 90vh !important;
  width: 65%;
}
.el-card {
  overflow: inherit;
  border-radius: 0;
  border: 1px solid @primaryBorder !important;
  color: @primaryThemeTxtColor4;
}
.head {
  font-size: 16px;
  color: #7367f0;
  font-weight: 600;
  margin-bottom: 20px;
}

.container {
  color: @primaryThemeTxtColor4;
  font-size: 14px;

  .div_box {
    // background: @primaryBorderColor3;
    // background: #353A54;
    border-radius: 15px;
    // padding: 20px 25px 50px 35px;
    padding: 20px 0px 50px 0px;
    box-sizing: border-box;
    margin-bottom: 15px;
    position: relative;

    .head {
      font-size: 16px;
      color: #7367f0;
      font-weight: 600;
      margin-bottom: 20px;
    }

    .div_neiron {
      display: flex;
      flex-wrap: wrap;
      padding: 0 30px;
      box-sizing: border-box;
      line-height: 35px;
      > div {
        width: 33.33%;
        > span:first-of-type {
          color: @primaryFFFColor6;
        }
      }
    }

    .div_tab {
      display: flex;
      .tab_box {
        box-shadow: 1px 1px 5px 0px #ccc;
      }
      > div {
        background: @primaryBorderColor4;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 15px;
        margin-right: 15px;
        width: 120px;
        height: 120px;
        cursor: pointer;
        box-sizing: border-box;

        > span:first-of-type {
          margin-bottom: 8px;
        }
      }
    }

    .timer {
      position: absolute;
      right: 3%;
      top: 5%;
      display: flex;
      align-items: center;

      > div:first-of-type {
        height: 34px;
        line-height: 34px;
        border-radius: 5px;
        padding: 0 40px;
        box-sizing: border-box;
        margin-right: 15px;
        cursor: pointer;
        border: 1px solid @primaryBorder;
        color: @primaryFFFColor5;
      }

      > div:nth-of-type(2) {
        height: 34px;
        line-height: 34px;
        border-radius: 5px;
        padding: 0 40px;
        box-sizing: border-box;
        margin-right: 35px;
        cursor: pointer;
        border: 1px solid @primaryBorder;
        color: @primaryFFFColor5;
      }
    }
  }
}

// 时间控件
::v-deep .el-card__body {
  background: @primaryHeaderBgcolor;
}
::v-deep .el-range-input {
  background: @primaryHeaderBgcolor;
}

::v-deep .el-input__inner {
  background-color: @primaryHeaderBgcolor !important;
  border: 1px solid @primaryBorder !important;
  // height: 34px;
  // line-height: 34px;
}

::v-deep .el-range-editor.el-input__inner {
  padding: 0 0 0 10px;
}

::v-deep .el-date-editor--daterange.el-input__inner {
  width: 245px;
}

::v-deep .el-date-editor .el-range__icon {
  color: @primaryFFFColor5 !important;
}

::v-deep .el-range-separator {
  color: @primaryFFFColor5 !important;
  line-height: 32px;
}

::v-deep .el-input__inner,
::v-deep .el-date-editor .el-range-input {
  color: @primaryFFFColor5 !important;

  &::placeholder {
    color: @primaryFFFColor5 !important;
  }

  &::-webkit-input-placeholder {
    /* WebKit browsers 适配谷歌 */
    color: @primaryFFFColor5 !important;
  }

  &:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 适配火狐 */
    color: @primaryFFFColor5 !important;
  }

  &::-moz-placeholder {
    /* Mozilla Firefox 19+ 适配火狐 */
    color: @primaryFFFColor5 !important;
  }

  &:-ms-input-placeholder {
    /* Internet Explorer 10+  适配ie*/
    color: @primaryFFFColor5 !important;
  }
}
</style>
